<!-- 客户控件 -->
<template>
  <a-space direction="vertical" style="width: 100%">
    <a-select
      :disabled="props.disabled"
      @change="getClientInfo"
      :placeholder="props.placeholder"
      v-model="form"
      allow-search
    >
      <a-option v-for="item in client" :key="item.id" :value="item.id">{{
        item.name
      }}</a-option>
    </a-select>
  </a-space>
  <!-- <a-input
      ref="refInput"
      :disabled="props.disabled"
      :model-value="modelValue"
      @click="getData"
    />
  </a-space>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      选择客户
      <a-button
        style="margin-left: 100px"
        type="primary"
        @click="addNewCustomers"
        >添加新客户</a-button
      >
    </template>
    <div class="box">
      <div
        :class="index === rowIndex ? 'New-item' : 'item'"
        v-for="(item, rowIndex) in client.list"
        :key="item.id"
        @click="selected($event, item, rowIndex)"
        >{{ item.name }}</div
      >
    </div>
  </a-modal> -->

  <a-modal
    v-model:visible="addvisible"
    title="添加新客户"
    @before-ok="onOk"
    auto-label-width
  >
    <a-form
      auto-label-width
      ref="formRef"
      :model="NewCustomersForm"
      :rules="rules"
    >
      <a-form-item label="客户编号:">
        <a-input
          disabled
          placeholder="系统自动生成"
          v-model="NewCustomersForm.customerNumber"
        />
      </a-form-item>
      <a-form-item field="name" label="客户名称:">
        <a-input v-model="NewCustomersForm.name" />
      </a-form-item>
      <a-form-item field="contactName" label="联系人:">
        <a-input v-model="NewCustomersForm.contactName" />
      </a-form-item>
      <a-form-item field="customerContactPhone" label="联系电话:">
        <a-input-number
          :min="1"
          v-model="NewCustomersForm.customerContactPhone"
        />
      </a-form-item>
      <a-form-item field="customerEmail" label="联系邮箱:">
        <a-input v-model="NewCustomersForm.customerEmail" />
      </a-form-item>
      <a-form-item field="address" label="联系地址:">
        <a-input v-model="NewCustomersForm.address" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, onMounted, nextTick } from 'vue';
  import {
    GetClientList,
    GetClientDetail,
    GetClientDetailTabs,
    PostClientAdd,
  } from '@/api/order-management/client-management/client-list/index';
  import miiter from '@/utils/mitt';
  import regex from '@/utils/regex';

  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      disabled?: boolean;
      oneValue: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );
  const formRef = ref();
  const emit = defineEmits(['update:oneValue']);
  const visible = ref(false);
  interface ItemType {
    id: number;
    name: string;
  }

  const client = ref<any>([]);
  // const value = ref([]);
  const form = computed({
    get() {
      return props.oneValue;
    },
    set(val) {
      emit('update:oneValue', val);
    },
  });
  // const clientSelect = ref('');
  // const itemSelected = ref(); // 储存当前选择的客户信息
  // const modelValue = ref('');
  // const index = ref();

  // TODO:查询方式要改
  const getData = async () => {
    let params = {
      page: 0,
      size: -1,
      keyWord: '',
    };
    let res = await GetClientList(params);
    client.value = res.content;
  };

  getData();
  let refInput = ref();
  const getClientInfo = async (id: number) => {
    if (id) {
      let res = await GetClientDetailTabs({
        id,
        typeId: 1,
      });
      refInput.value?.focus();
      miiter.emit('clientRefresh', { item: res, key: 'client' });
    }
  };

  // const selected = (e: any, item: any, rowIndex: number) => {
  //   index.value = rowIndex;
  //   getClientInfo(item.id);
  // };
  // const handleOk = () => {
  //   visible.value = false;
  //   form.value = itemSelected.value.id;
  //   modelValue.value = itemSelected.value.name;
  // };

  const handleCancel = () => {
    visible.value = false;
  };

  interface DepartmentItem {
    id: number;
    name: string;
    [name: string]: string | number;
  }
  interface Department {
    department: DepartmentItem[];
  }
  // const data = reactive<Department>({ department: [] });

  let NewCustomersForm: any = reactive({
    name: '',
    customerNumber: '',
    customerContactPhone: '',
    customerEmail: '',
    address: '',
    contactName: '',
  });

  onMounted(() => {
    if (!props.disabled) {
      getClientInfo(Number(props.oneValue));
    }
  });

  // 校验手机
  const validatePhone = (val: any, callback: any) => {
    if (val === undefined) callback(new Error('请输入电话号码'));
    else if (!regex.phone.role.test(val)) callback('请输入正确的电话号码');
    return true;
  };

  // 校验邮箱
  const validateEmail = (val: any, callback: any) => {
    if (val === undefined) callback(new Error('请输入邮箱'));
    else if (!regex.email.role.test(val)) callback('请输入正确的邮箱');
    return true;
  };

  const rules = reactive({
    name: [{ required: true, message: '请输入客户名称' }],
    customerContactPhone: [{ required: true, validator: validatePhone }],
    customerEmail: [{ required: true, validator: validateEmail }],
    city: [{ required: true, message: '请输入省市区' }],
    address: [{ required: true, message: '请输入联系地址' }],
    contactName: [{ required: true, message: '请输入联系姓名' }],
    contactPhone: [{ required: true, validator: validatePhone }],
  });
</script>

<style scoped lang="less">
  .box {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

    .item {
      width: 100px;
      padding: 6px;
      margin: 8px;
      border-radius: 5px;
      background: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .New-item {
      width: 100px;
      padding: 6px;
      margin: 8px;
      border-radius: 5px;
      background: skyblue;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
